<template>
	<view class="" style="margin:24rpx 0;">
		<scroll-view  scroll-x  style="width:800rpx;">
			<view  style="display: flex;align-items: center;">
				<view class="zhiyeclass" :class="{'active-zhiye': zhiye == ''}" style="margin-right: 32rpx;" @click="gosaixuanzhiye(item)">
					<image src="https://static-tool.77.top/static/all-occ.png" mode="" style="width: 64rpx;height:64rpx;"></image>
				</view>
				 <view class="zhiyeclass" :class="{'active-zhiye': zhiye == item.enname}" v-for="(item,index) in array" :key="index" style="margin-right: 32rpx;" @click="gosaixuanzhiye(item)">
				 	<image :src="item.image" mode="" style="width: 64rpx;height:64rpx;"></image>
				 </view>
			</view>
		</scroll-view>
		<up-list @scrolltolower="scrolltolower"  v-if="cardList?.data?.length != 0">
			<up-list-item>
			<view class="current-card-list">
					<view class="current-card" v-for="item in cardList.data">
						<view class="card-info" @click="handleOpenGroupDetail(item.object.id, item.object.name)">
							<image class="card-image" v-if="item.object.banner_image" :src="item.object.banner_image" mode="aspectFill"></image>
							<image class="card-image" v-else :src="item.object.image" mode=""></image>
							<view class="right-info-outer">
								<view class="card-right-info">
									<view class="card-info-name" style="white-space: nowrap;text-overflow: ellipsis; overflow: hidden; width: 60%;">
										{{item.object.name}}
									</view>
									<view class="count-list" >
										<view v-for="(obj,ina) in item.object.statis.rarity" :key="ina" style="display: flex;align-items: center;margin-right: 20rpx;">
											<image :src="rarityMap[obj.name]" mode=""style="width:17rpx;height:22rpx"></image>
											 <view style="font-size: 24rpx;color: #2E3033;margin-left: 2rpx;">{{obj.count}}</view>
										</view>
									</view>
									<view class="count-item" style="margin-top: 16rpx;">
										<image src="https://static-tool.77.top/static/cardGroup-bottle.png" mode=""></image>
										<text>{{item.object.amount}}</text>
									</view>
								</view>
							</view>
							<view class="card-time">
								{{item.createtime && timeAgo(item.createtime)}}
							</view>
						</view>
						<view class="slider">
		
						</view>
						<view class="creator-info">
							<view class="create-left">
								<image  :src="item.user.avatar" mode=""></image>
								<text>{{item.user.username}}</text>
							</view>
							<view class="create-right">
								<image @click="handleClickZan(item, false)"  v-if="item.object.is_zan" class="title-icon"
									src="https://static-tool.77.top/static/cardGroup-zanfill.png" alt="" />
								<image @click="handleClickZan(item, true)" v-else class="title-icon"
									src="https://static-tool.77.top/static/cardGroup-zan.png" alt="" />
								<text>{{item.object.zan}}</text>
							</view>
						</view>
					</view>
				</view>
				</up-list-item>
				</up-list>
				<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;margin-top: 240rpx;" v-if="cardList?.data?.length == 0">
					 <image src="https://static-tool.77.top/static/null-image.png" mode=""  style="width: 390.13rpx;height: 299.29rpx;margin-right: 80rpx;"></image>
					 <view style="font-size: 28rpx;color: #2E3033;font-weight: bold;margin-top: 48rpx;">你尚未收藏的如何卡组哟，去卡组库看看吧~</view>
					  <image src="../../../static/image/tiny button@2x.png" mode="" style="width: 168rpx;height: 52rpx;margin-top: 32rpx;" @click="gokazhu()"></image>
				</view>
	</view>
</template>

<script setup>
	import request from '@/http/index.js';
	import {
		onMounted,
		reactive,
		ref
	} from 'vue'
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		formatDistanceToNow, isBefore
	} from 'date-fns'
	
	
	const handleClickZan = (item, flag) => {
		// item.isZan = flag
		request({
			url: 'api/deck/zan',
			method: 'POST',
			data: {
				deck_id: item.id
			}
		}).then((res) => {
		     if(res.code == 1){
				 collertlist()
			 }
		})
	}
	// 跳转到卡组
	const handleOpenGroupDetail = (id, groupName) => {
		uni.navigateTo({
			url: `/homePackages/cardGroupDetail?id=${id}&name=${groupName}`
		})
	}
	let array = ref([])
	const timeAgo = (time) => {
	  const now = new Date();
	
	  // 计算时间差
	  const differenceInMillis = now - new Date(time);
	  const differenceInMinutes = Math.floor(differenceInMillis / (1000 * 60));
	  const differenceInHours = Math.floor(differenceInMillis / (1000 * 60 * 60));
	  const differenceInDays = Math.floor(differenceInMillis / (1000 * 60 * 60 * 24));
	
	  if (differenceInDays >= 1) {
	    return `${differenceInDays}天前`;
	  } else if (differenceInHours >= 1) {
	    return `${differenceInHours}小时前`;
	  } else if (differenceInMinutes >= 1) {
	    return `${differenceInMinutes}分钟前`;
	  } else {
	    return '刚刚';
	  }
	};
	const rarityMap = {
		'基础': 'https://static-tool.77.top/static/cardGroup-green.png',
		'普通': 'https://static-tool.77.top/static/cardGroup-white.png',
		'稀有': 'https://static-tool.77.top/static/cardGroup-blue.png',
		'史诗': 'https://static-tool.77.top/static/cardGroup-purple.png',
		'传说': 'https://static-tool.77.top/static/cardGroup-orange.png',
		"地标":'https://static-tool.77.top/static/cardGroup-orange.png',
			'免费': 'https://static-tool.77.top/static/icon_rare@3x.png',
	}
	const cardList = ref([{
				id: 1,
				image: 'https://img2.baidu.com/it/u=2410381798,2369929611&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800',
				name: '纳斯里亚堡：鬼咒术',
				count1: 6,
				count2: 6,
				count3: 3,
				count4: 4,
				count5: 5,
				liquid: 12345,
				time: '2024-9-6',
				zan: 35646,
				author: '凑得鸡脯肉若天如果'
			},
			{
				id: 1,
				image: 'https://img2.baidu.com/it/u=2410381798,2369929611&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800',
				name: '纳斯里亚堡：鬼咒术',
				count1: 6,
				count2: 6,
				count3: 3,
				count4: 4,
				count5: 5,
				liquid: 12345,
				time: '2024-9-2',
				zan: 35646,
				author: '凑得鸡脯肉若天如果'
			},
			{
				id: 1,
				image: 'https://img2.baidu.com/it/u=2410381798,2369929611&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800',
				name: '纳斯里亚堡：鬼咒术',
				count1: 6,
				count2: 6,
				count3: 3,
				count4: 4,
				count5: 5,
				liquid: 12345,
				time: '2024-9-2',
				zan: 35646,
				author: '凑得鸡脯肉若天如果'
			},
			{
				id: 1,
				image: 'https://img2.baidu.com/it/u=2410381798,2369929611&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800',
				name: '纳斯里亚堡：鬼咒术',
				count1: 6,
				count2: 6,
				count3: 3,
				count4: 4,
				count5: 5,
				liquid: 12345,
				time: '2024-9-2',
				zan: 35646,
				author: '凑得鸡脯肉若天如果'
			}
		])
		let page = ref(1)
		const scrolltolower = () => {
			if(page.value <= cardList.value.last_page){
				page.value ++
				loadmore();
			}
			
		};
		const raritySortMap = {
			'免费':'6',
			'基础': '5',
			'普通': '4',
			'稀有': '3',
			'史诗': '2',
			'传说': '1'
		}
	const	collertlist = ()=>{
		  request({
		  	url: 'api/common/config',
		  	method: 'POST',
		  }).then((res) => {
		       array.value = res.data.property.cardClass.values
		  })
			request({
				url: 'api/user/wishs',
				method: 'POST',
			}).then((res) => {
				if(res.data.data.length > 0){
					res.data.data.forEach(dd => {
						if(dd?.object?.statis?.rarity){
							dd.object.statis.rarity = dd?.object?.statis?.rarity.map(dd => {
								return {
									...dd,
									sort: raritySortMap[dd.name],
								}
							}).sort((a, b) => a.sort - b.sort)
						}
					})
				}
			       cardList.value = res.data
			})
		}
		onMounted(() => {
			collertlist()
		})
		// onShow(() => {
		// 	console.log('onShow');
		// 	collertlist()
		// })
		// onLoad(() => {
		// 	console.log('onLoad');
		// })
		const	loadmore = ()=>{
			request({
				url: 'api/user/wishs',
				method: 'POST',
				data:{
					page:page.value
				}
			}).then((res) => {
			       cardList.value = res.data
				   if(page.value ==1){
					   cardList.value = res.data
				   }else{
					     cardList.value =  cardList.value.data.concat(res.data.data)
				   }
			})
		}
		const zhiye = ref('')
		const gosaixuanzhiye = (e) =>{
			if(e){
			 	zhiye.value = e.enname
			}else{
				zhiye.value = ''
			}
			request({
				url: 'api/user/wishs',
				method: 'POST',
				data:{
				       cardClass:zhiye.value,
					   page:page.value
				}
			}).then((res) => {
			       cardList.value = res.data
				   if(page.value ==1){
					   cardList.value = res.data
				   }else{
					     cardList.value =  cardList.value.data.concat(res.data.data)
				   }
			})
		}
		 const gokazhu = () =>{
			 uni.navigateTo({
			 	url:'/homePackages/cardGroup'
			 })
		 }
</script>

<style scoped lang="scss">
	.zhiyeclass{
		image{
			position: relative;
			&::after {
				content: "";
				display: inline-block;
				width: 64rpx;
				height: 64rpx;
				background: rgba(255, 255, 255, 0.6);
				position: absolute;
				top: 0;
				left: 0;
			}
		}
	}
	.active-zhiye{
		image{
			&::after {
				display: none;
			}
		}
	}
		.current-card-list {
				padding: 16rpx 24rpx 0 24rpx;
				box-sizing: border-box;
				.current-card {
					margin-top: 32rpx;
					background: #FFFFFF;
					border-radius: 24rpx;
					padding: 24rpx;
					box-sizing: border-box;
	
					.card-info {
						display: flex;
	
						.card-image {
							width: 120rpx;
							height: 120rpx;
							border-radius: 16rpx;
							flex-shrink: 0;
						}
	
						.right-info-outer {
							flex: 1;
							margin-left: 16rpx;
							display: flex;
							justify-content: space-between;
	
							.card-right-info {
								.card-info-name {
									font-family: PingFang SC, PingFang SC;
									font-weight: bold;
									font-size: 26rpx;
									color: #17181A;
									line-height: 26rpx;
									max-width: 316rpx;
									white-space: nowrap;
									text-overflow: ellipsis;
									overflow: hidden;
								}
	
								.count-list {
									margin-top: 16rpx;
									display: flex;
									align-items: center;
								}
	
								.count-item {
									margin-right: 16rpx;
									display: flex;
									align-items: center;
									line-height: 24rpx;
	
									image {
										width: 24rpx;
										height: 24rpx;
									}
	
									text {
										font-family: PingFang SC, PingFang SC;
										font-weight: 500;
										font-size: 24rpx;
										color: #2E3033;
									}
	
								}
							}
	
						}
	
						.card-time {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #7B7D80;
						}
					}
	
					.slider {
						width: 100%;
						height: 1px;
						background: #eee;
						margin: 32rpx 0;
					}
	
					.creator-info {
						display: flex;
						justify-content: space-between;
						align-items: center;
	
						view {
							display: flex;
							align-items: center;
						}
	
						.create-left {
							image {
								width: 40rpx;
								height: 40rpx;
								border-radius: 50%;
							}
	
							text {
								margin-left: 8rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 28rpx;
								color: #2E3033;
								line-height: 28rpx;
							}
						}
	
						.create-right {
							image {
								width: 28rpx;
								height: 28rpx;
							}
	
							text {
								margin-left: 8rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 24rpx;
								color: #2E3033;
								line-height: 24rpx;
								text-align: left;
							}
						}
					}
				}
			}
</style>